<template>
   <div class="user_profile">
      <!-- 导航栏 -->
      <van-nav-bar
         title="个人信息"
         class="page_nav_bar"
         left-arrow
         @click-left="$router.back()"
      ></van-nav-bar>

      <input
         type="file"
         hidden
         ref="file"
         @change="onFileChange"
      />
      <!-- 触发 change 事件 -->
      <!-- 个人信息 -->
      <van-cell
         title="头像"
         is-link
         @click="$refs.file.click()"
      >
         <van-image
            fit="cover"
            round
            class="avatar"
            :src="user.photo"
         />
      </van-cell>
      <van-cell
         title="昵称"
         :value="user.name"
         is-link
         @click="isUpdateNameShow = true"
      ></van-cell>
      <van-cell
         title="性别"
         :value="user.gender === 0 ? '男' : '女'"
         is-link
         @click="isUpdateGenderShow = true"
      ></van-cell>
      <van-cell
         title="生日"
         :value="user.birthday"
         is-link
         @click="isUpdateBirthdayShow = true"
      ></van-cell>
      <!-- 编辑昵称 -->
      <van-popup
         v-model="isUpdateNameShow"
         position="bottom"
         :style="{ height: '100%' }"
      >
         <UpdateName
            v-if="isUpdateNameShow"
            @close="isUpdateNameShow = false"
            v-model="user.name"
         ></UpdateName>
      </van-popup>
      <!-- 编辑性别 -->
      <van-popup
         v-model="isUpdateGenderShow"
         position="bottom"
      >
         <UpdateGender
            @close="isUpdateGenderShow = false"
            v-if="isUpdateGenderShow"
            v-model="user.gender"
         ></UpdateGender>
      </van-popup>
      <!-- 编辑生日 -->
      <van-popup
         v-model="isUpdateBirthdayShow"
         position="bottom"
      >
         <UpdateBirthday
            v-if="isUpdateBirthdayShow"
            v-model="user.birthday"
            @close="isUpdateBirthdayShow = false"
         ></UpdateBirthday>
      </van-popup>
      <!-- 编辑头像 -->
      <van-popup
         v-model="isUpdatePhotoShow"
         position="bottom"
         style="height: 100%;"
      >
         <UpdatePhoto
            v-if="isUpdatePhotoShow"
            :img="img"
            @close="isUpdatePhotoShow = false"
            @update-photo="user.photo = $event"
         ></UpdatePhoto>
      </van-popup>
   </div>
</template>

<script>
import { getUserProfile } from '@/api/user'
import UpdateName from './components/update-name.vue'
import UpdateGender from './components/update-gender.vue'
import UpdateBirthday from './components/update-birthday.vue'
import UpdatePhoto from './components/update-photo.vue'
export default {
   name: 'User_profile',
   data() {
      return {
         // 个人信息
         user: {},
         isUpdateNameShow: false,
         isUpdateGenderShow: false,
         isUpdateBirthdayShow: false,
         isUpdatePhotoShow: false,
         // 预览的图片
         img: null
      }
   },
   components: {
      UpdateName,
      UpdateGender,
      UpdateBirthday,
      UpdatePhoto
   },
   created() {
      this.loadUserProfile()
   },
   methods: {
      async loadUserProfile() {
         try {
            const { data } = await getUserProfile()
            // console.log(data)
            this.user = data.data
         } catch (err) {
            this.$toast('数据获取失败')
         }
      },
      onFileChange() {
         // 获取文件对象
         const file = this.$refs.file.files[0]
         // 基于文章对象 获取 blob 数据 二进制的 url
         // 转成 src 的链接形式 data 就是图片的路径
         const data = window.URL.createObjectURL(file)
         // console.log(data)
         this.img = data
         // 展示预览图片弹出层
         this.isUpdatePhotoShow = true
         // 当选择同一个文件  不会触发 change 事件
         // 每次使用完毕把 value 清空
         this.$refs.file.value = ''
      }
   }
}
</script>

<style lang="less" scoped>
.user_profile {
   .avatar {
      width: 60px;
      height: 60px;
   }
   .van-popup {
      background-color: #f5f7f9;
   }
}
</style>
